<template>
    <div class="lora">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i>LoRa配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">username</div>
                        <el-input v-model="form.username" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">password</div>
                        <el-input v-model="form.password" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">log_level</div>
                        <el-input v-model="form.log_level" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">udp_bind</div>
                        <el-input v-model="form.udp_bind" :disabled="false"></el-input>
                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">skip_crc_check</div>
                          <el-select v-model="form.skip_crc_check" placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>

                    </el-col>
                    <el-col :md="24" :lg="24">
                        <div class="sub-title">server</div>
                        <el-input v-model="form.server" :disabled="false"></el-input>
                    </el-col>
                </el-form>
        </div>
        <el-button type="primary" @click="onSubmit">提交</el-button>

    </div>
</template>

<script>
    export default {
        name: 'baseform',
        data: function(){
            return {
                data:{},
                servicename:'cc',
                form: {
                    log_level: '',
                    udp_bind: '',
                    skip_crc_check: '',
                    server: '',
                    username: '',
                    password: '',
                    ca_cert: '',
                    tls_cert: "",
                    tls_key: ""
                },
                options: [{
                  value: true,
                  label: 'true'
                }, {
                  value: false,
                  label: 'false'
                }],
                select_value1:"true",
                select_value2:"true",
                select_value3:"true"
            }
        },
        mounted() {
            var that = this;
            this.getData();
        },
        methods: {
            onSubmit() {
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/brgcfg");
                let body = JSON.parse(JSON.stringify(self.form))
                body.log_level = body.log_level == ''?'':parseInt(body.log_level)
                fetch(url,
                    {
                        method:"POST",
                         headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(body)
                    }).then(function(res){
                        if(res.status == 200){
                            self.$message.success('提交成功！');
                        }
                    })
            },
            getData(){
                let self = this;   
                let url = new URL("http://" + location.hostname + ":3000/brgcfg");
                fetch(url,
                    {
                        method:"GET",
                         headers: {
                            "Content-Type": "application/json"
                        }
                    }).then(function(res){
                        return res.json()
                    }).then(function(res){
                        console.log("res",res)
                        var result = {} 
                        for(var i in res.backend.mqtt){
                            result[i] = res.backend.mqtt[i]
                        }
                        for(var i in res.packet_forwarder){
                            result[i] = res.packet_forwarder[i]
                        }
                        for(var i in res.general){
                            result[i] = res.general[i]
                        }
                        console.log("result", result)
                        self.form = result;
                    })
            }
        }
    }
</script>
<style>
    .lora .sub-title{
        font-size: 14px;
        font-family: 微软雅黑;
        font-weight: bold;
        color: #767576;
    }
    .lora .container .el-col{
        padding: 10px 0px;
    }
    .lora .container .el-form{
        overflow: hidden;
    }
    .lora .container .el-input{
        width: 500px
    }
    .lora .el-button{
        margin: 10px;
    }
</style>